const path = require('path');
const projectPath = require('./projectPath.js');
const PurifyCssWebpack = require('purifycss-webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const glob = require('glob');
module.exports = {
  entry: {
    bundle1: path.resolve(projectPath, 'src', 'main.js'),
    //bundle2: ['./src/main2.js', './src/main3.js']
  },
  output: {
    filename: 'js/built.[name].[contenthash:10].js',
    path: path.resolve(projectPath, 'dist'),//所有输出资源公共路径
    chunkFilename: 'js/chunk.[name].[contenthash:10].js'//非入口chunk资源位置
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: {//将hash单独打包,解决被引入模块修改导致引入模块contenthash改变从而导致缓存失效的问题
      name: entryPoint => `runtime.${entryPoint.name}`
    }
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                  esModule: false//关闭ESModule url-loader默认用ESModule解析时候，而html-loader是commonjs,这里关闭ESModule
                }
              }
            ]
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(html|css|js|scss|sass|png|jpg|gif|vue)$/,
            loader: 'file-loader',
            options: {
              name: '[path][name].[contenthash:10].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 排除尚未用到的css
    new PurifyCssWebpack({
      paths: glob.sync(path.join(projectPath, 'src/*.html')),
    })
  ]
}